<script lang="ts" setup>
import { showToast } from "@nutui/nutui";
import { ContactSupportOutlined } from "@vicons/material";
import { Icon } from "@vicons/utils";
import dayjs from "dayjs";
import {useRouter} from "vue-router";

const router = useRouter()

const props = defineProps<{
  order: OrderInfoResp;
}>();

const listFields = computed(() => [
  {
    name: "订单编号",
    value: props.order.orderNo,
  },
  {
    name: "下单时间",
    value: dayjs(props.order.createTime).format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    name: "付款时间",
    value: props.order.payTime ? dayjs(props.order.payTime).format("YYYY-MM-DD HH:mm:ss") : "",
  },
  {
    name: "订单状态",
    value: {
      1: "待支付",
      2: "已支付",
      3: "已取消",
    }[props.order.status],
  },
  {
    name: "购买数量",
    value: `${props.order.amount} 份`,
  },
  {
    name: "订单金额",
    value: `${props.order.orderPrice / 100} 元`,
  },
]);

const copyText = (text: string) => {
  const input = document.createElement("input");
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  showToast.text("复制成功");
};
</script>

<template>
  <ul class="c-gray-5">
    <li v-for="(item, index) in listFields" :key="index" class="flex justify-between items-center py-4 b-b-1 b-b-solid">
      <span class="shrink-0">{{ item.name }}</span>
      <span class="grow text-end" @click="item.value && copyText(item.value)">{{ item.value }}</span>
    </li>
    <li class="flex-center pt-3 gap-1" @click="router.push('/contact')">
      <Icon size="20">
        <ContactSupportOutlined />
      </Icon>
      联系客服
    </li>
  </ul>
</template>
